
<template>
<div class="custom-tree-container" style="margin-top:10px">
  <div class="block">
    <el-tree
      :data="data"
      node-key="id"
      show-checkbox
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
  </div>

</div>
</template>

<script>
let id = 1000;
export default {
  name: "shangpinpinpai",
  
  components: {

  },
  data() {
       const data = [{
        id: 1,
        label: '一级分类',
        children: [{
          id: 2,
          label: '新品分类',
          children: [{
            id:5,
            label: 'CGLDG系列'
          }, {
            id: 6,
            label: 'BZDZLLY系类'
          }]
        }, {
          id: 3,
          label: '高端定制分类',
          children: [{
            id:7,
            label: '轻奢家居'
          }, {
            id:8,
            label: '意式极简'
          }]
        },{
          id: 4,
          label: '展厅现货',
          children: [{
            id:9,
            label: '现代极简'
          },]
        }
        ]
      },
      ];
    return {
        data: JSON.parse(JSON.stringify(data)),
    };
  },
  methods: {
            append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      renderContent(h, { node, data}) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button style="margin-left:10px" size="mini">编辑</el-button>
              <el-button size="mini" type="primary" on-click={ () => this.append(data) }>新增</el-button>
              <el-button size="mini" type="danger" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>
          </span>);
      }
    
  },
  created() {},
  mounted() {},
};
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;

    font-size: 14px;
    padding-right: 8px;
  }

.el-tree-node__content {
    display: flex;
    align-items: center;
    height: 40px;
    cursor: pointer;
}


</style>

